<template>
  <div
    style="background-image: url('http://static.simpledesktops.com/uploads/desktops/2020/07/18/Artboard_1.png'); 
    background-size: 100vh; height: 100vh; width: 100%; overflow: hidden"
  >
    <div
      style="
        width: 400px;
        height: 500px;
        margin: 200px auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 9px;
      "
    >
      <div
        style="
          color: #333;
          font-size: 32px;
          text-align: center;
          padding: 60px 0;
        "
      >
        欢迎登录
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        style="
          height: 180px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <el-form-item prop="name">
          <el-input v-model="form.name" prefix-icon="Avatar" />
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input v-model="form.pwd" prefix-icon="Lock" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  data() {
    return {
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "长度应为1到10",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 1,
            message: "长度应不小于1",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    login() {
      
          request.post("/api/login.php", this.form).then((res) => {
            console.log(res);
            if (res.code === "0") {
              this.$message({
                type: "success",
                message: "登录成功",
              });
              console.log('succ');
              this.$router.push("/"); //登录成功后跳转主页
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        
    },
  },
};
</script>

<style>
</style>